<template>
  <div class="statement-payable-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`未生成账单(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`已生成账单(${pageStat['2']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        :activeKey="activeKey"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
        :sort-config="{ remote: true }"
        @sort-change="sortChangeHandle"
      >
        <template #tool>
          <div style="display: flex; justify-content: space-between">
            <div>
              <a-button type="primary" @click="importStatementHandle" v-if="activeKey === '1'">导入对账单</a-button>
              <a-button type="primary" @click="importAddFeeHandle" v-if="activeKey === '1'">导入加收单</a-button>
              <a-badge :count="preAcceptedCount" :offset="[-12, 5]">
                <a-button @click="showPreAcceptedBillHandle">待接收账单</a-button>
              </a-badge>
              <a-button type="primary" @click="showStatictisHandle">查看统计</a-button>
              <a-button type="primary" v-if="activeKey === '2'" @click="withdrawBillHandle">批量撤销</a-button>
            </div>

            <!-- 导出管理 -->
            <div>
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 导出 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="downloadDataHandle">导出</a-menu-item>
                    <a-menu-item @click="exportStatementHandle">导出对账</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>
        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#cccc"> 未生成账单 </a-tag>
          <a-tag v-if="row.state === 4" color="#2db7f5"> 部分核销 </a-tag>
          <a-tag v-if="row.state === 3" color="#f40"> 待核销 </a-tag>
          <a-tag v-if="row.status === 2" color="#108ee9"> 已生成账单 </a-tag>
          <a-tag v-if="row.status === 5" color="#87d068"> 已核销 </a-tag>
        </template>
        <template #action="{ row }">
          <template v-if="activeKey === '1'">
            <a-button type="link" @click="showDetailsHandle(row)">详情</a-button>
            <a-button type="link" @click="reverseBillHandle(row)" danger>撤销</a-button>
          </template>
          <template v-else>
            <a-button type="link" @click="showDetailsHandle(row)">详情</a-button>
          </template>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
        :activeKey="activeKey"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="dialogOpts.visible"
      :maskClosable="false"
      :keyboard="false"
      :closable="['DataStatistics'].includes(dialogOpts.component)"
      :footer="null"
      :title="dialogOpts.title"
      :width="dialogOpts.width"
    >
      <component
        v-model:visible="dialogOpts.visible"
        :column="statisticsColumn"
        :init="getStatisticsDataFn"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
      ></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import DataStatistics from "@/components/dataStatistics/index.vue";
import ImportStatement from "./components/importStatement/index.vue";
import Details from "./components/details/index.vue";
import PreAcceptedBill from "./components/preAcceptedBill/index.vue";
import TableHook from "@/hook/tableHook";
export default {
  name: "StatementPayable",
  components: {
    ImportStatement,
    Details,
    PreAcceptedBill,
    DataStatistics
  }
};
</script>
<script lang="ts" setup>
import { searchItemList, tableColumn, statisticsColumn } from "./data";
import { DownOutlined } from "@ant-design/icons-vue";
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const { tableHeight, loading } = TableHeightHook(110);
const { searchForm, tableData, tableRef, dialogOpts, drawerOpts, activeKey, pageStat, preAcceptedCount, getPopupContainer } = InitHook();
const {
  searchHandle,
  getData,
  changeTabHandle,
  showDetailsHandle,
  importStatementHandle,
  importAddFeeHandle,
  downloadDataHandle,
  reverseBillHandle,
  showPreAcceptedBillHandle,
  getStatisticsDataFn,
  showStatictisHandle,
  exportStatementHandle,
  withdrawBillHandle
} = OperationHook({
  activeKey,
  pageStat,
  searchForm,
  tableData,
  tableRef,
  dialogOpts,
  drawerOpts,
  loading,
  preAcceptedCount
});
const { sortChangeHandle } = TableHook({ searchForm }, getData);
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});
searchHandle();
</script>
<style lang="stylus" scoped></style>
